<template>
  <div class="table-container">
    <div class="demo-progress" style="margin-top: -5px" v-if="percentageFlag2">
      <el-progress :stroke-width="10" :percentage="percentage2" />
    </div>
    <el-table
      border
      v-loading="loading"
      ref="dataTabRef"
      @selection-change="handleSelectionChange"
      :data="maxtableData"
      :height="height"
      @header-click="headerClick"
      @cell-click="cellClick"
      @row-click="rowClick"
      width="100%"
      :cell-class-name="tableCellClassName"
    >
      <el-table-column
        label="项"
        width="350"
        fixed
        prop="label"
        align="center"
      ></el-table-column>
      <el-table-column fixed type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column
        v-for="(item, key) in tableHeader"
        :key="key"
        :prop="item.position + ''"
        :label="
          (item.pname ? item.pname : '') +
          item.name +
          (item.position ? '[' + item.position + '' + ']' : '')
        "
        align="center"
        width="100"
      >
        <template #default="scope">
          <el-input v-model="scope.row['value' + item.position]"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { tableHeader } = storeToRefs(useApp);
const emit = defineEmits(["selectData"]);
const loading = inject("loadingRef");
defineProps({
  maxtableData: {
    type: Array,
    default: [],
  },
  height: {
    type: String,
    default: "400",
  },
  percentage2: {
    type: Number,
    default: 0,
  },
  percentageFlag2: {
    type: Boolean,
    default: false,
  },
});
const multipleSelection = ref([]);
const dataTabRef = ref();
const cellData = ref();
const tempData = ref();
const position = ref("");

const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    return "first-column-class";
  }
  return "";
};

const handleSelectionChange = (data) => {
  multipleSelection.value = data;
  emit("selectData", data, cellData.value, position.value);
};
//table 头部点击
const headerClick = (val) => {
  if (val.property != "label" && val.property) {
    position.value = val.property;
    dataTabRef.value.setCurrentRow();
    var elements = document.getElementsByClassName(val.id);
    let obj = document.getElementsByClassName("el-table__cell");
    for (var i = 0; i < obj.length; i++) {
      // 设置背景色为红色
      obj[i].style.backgroundColor = "#fff";
    }
    // 遍历每个元素并设置样式属性值
    for (var i = 0; i < elements.length; i++) {
      // 设置背景色为红色
      elements[i].style.backgroundColor = "#e6f2f0";
    }
    emit("selectData", multipleSelection.value, cellData.value, position.value);
  }
};
//单元格点击
const cellClick = (row, event) => {
  if (event.property != "label") {
    let obj = {
      meterPositionId: event.property,
      row,
    };
    cellData.value = obj;
    multipleSelection.value = [];
    position.value = "";
    dataTabRef.value.clearSelection();
    emit("selectData", multipleSelection.value, cellData.value, position.value);
  }
};
//表格行点击事件
const rowClick = (row) => {
  position.value = "";
  cellData.value = "";
  let obj = document.getElementsByClassName("el-table__cell");
  for (var i = 0; i < obj.length; i++) {
    // 设置背景色为红色
    obj[i].style.backgroundColor = "#fff";
  }
};
</script>

<style lang="scss">
.table-container {
  width: 1050px;
}
.mtable {
  display: flex !important;
  flex-direction: row !important;
  .el-table__cell {
    .el-checkbox {
      margin-top: 4px;
      margin-left: 7px;
    }
  }
  .el-table__header-wrapper {
    display: inline-block;
    width: 12.5rem /* 350/16 */;
    th {
      width: 12.5rem /* 350/16 */;
    }
  }
  .el-table__cell {
    height: 50px;
  }
  .el-table__body-wrapper {
    display: inline-block;
    width: calc(100% - 12.5rem);
    .el-table__body {
      width: 100% !important;
      tbody {
        width: 100%;
        display: block;
        tr {
          width: 80%;
          td {
            width: 100%;
          }
        }
        tr:nth-of-type(1) {
          width: 20%;
        }
      }
    }
    .el-table__empty-block {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
  }
  table {
    display: block;
    position: relative;
    width: 100%;
  }
  thead {
    float: left;
  }

  tbody tr {
    display: inline-block;
  }

  th,
  td {
    display: block;
    height: 45px;
  }
}
.first-column-class {
  background-color: #e6f2f0 !important;
}
</style>
